css z-index

2021 iThome 鐵人賽

DAY 20

自我挑戰組

html與css粗淺新手入門教學系列第 20 篇

13th鐵人賽

fujoshi123

2021-09-20 14:03:52

683 瀏覽

分享至

今天來說如何在css中改變各個物件的階層，需要用到z-index這個語法
首先創造出三個交錯重疊的方塊

        .box1, .box2, .box3{
            height: 300px;
            width:300px;
            color: white;
            font-size: 30px;
            position: absolute;
        }

在預設狀態下越後面的物體會在越上層

此時如果在box1加上以下程式碼

            z-index: 1;

就能讓box1來到最前面的階層而覆蓋其他兩個方塊

z-index值越大物件越靠前

若將box2設定為z-index: 2;則效果如下

css display

css position

系列文

html與css粗淺新手入門教學共 30 篇

RSS系列文訂閱系列文

3 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22201 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

html與css粗淺新手入門教學系列 第 20 篇

css z-index

z-index值越大物件越靠前

尚未有邦友留言

標記使用者

html與css粗淺新手入門教學系列第 20 篇